<template>
    <div class="page-login">
        <el-form :model="user" :rules="rules" ref="user" label-position="top" label-width="100px">
            <header>绘庆信贷系统运营后台</header>
            <el-form-item label="账号" prop="account">
                <el-input type="text" v-model="user.account" auto-complete="off" @keyup.enter.native="login()"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
                <el-input type="password" v-model="user.password" auto-complete="off" @keyup.enter.native="login()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="login()" >登录</el-button>
            </el-form-item>
            <footer>绘庆信贷系统©2017-2018</footer>
        </el-form>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                user: {
                    account: '',
                    password: ''
                },
                rules: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                },
                errorMsg: ''
            };
        },
        computed: {
            loading () {
                return store.state.requestCount > 0
            }
        },
        methods: {
            login() {
                if(this.user.account == ''){
                    this.errorMsg = '登录账号不能为空'
                    return;
                }

                if(this.user.password == ''){
                    this.errorMsg = '登录密码不能为空'
                    return;
                }

                var data = {
                    'account': this.user.account,
                    'password': this.user.password
                };

                var redirect = this.$route.query.redirect;

                api.request('system/admin/account/login', data, 'POST').then((res) => {
                    if(res.code == '10000'){
                        debugger
                        sessionStorage.token = res.data.token;

                        Lockr.set('userName',res.data.name);
                        Lockr.set('account',res.data.account);
                        Lockr.set('id',res.data.id);
                        Lockr.set('token', res.data.token);
                        Lockr.set('permission', res.data.permissions)
                        window.axios.defaults.headers.token = Lockr.get('token');
                        window.axios.defaults.headers['hq-token'] = Lockr.get('token');
                        redirect ? router.replace(redirect) : router.replace('/');
                    }
                    else{
                        this.errorMsg = res.message
                    }
                })
            },
            change(){
                this.errorMsg = ''
            }
        },
        mounted(){
            var _this = this
            document.onkeydown = function(event){
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e.keyCode == 13) {
                    _this.login()
                }
            }

            var inputs = document.querySelectorAll('input')
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].onchange = function(){
                    _this.errorMsg = ''
                }
            }

//            var docHeight = document.documentElement.clientHeight
//            var headHeight = document.querySelector('.head-div').offsetHeight;
//            var footHeight = document.querySelector('.footer-div').offsetHeight;
//            var midHeight = document.querySelector('.login-left-dev').offsetHeight
//            var paddingTop = (docHeight - headHeight - footHeight - midHeight) / 2;
//            var e = document.querySelector('.body-content-div')
//            e.style.paddingTop = paddingTop + 'px'
        }
    }
</script>

<style scoped>
    .page-login {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: #f3f3f4;
    }

    .page-login form {
        width: 80%;
        max-width: 360px;
        margin: 100px auto 0px;
        background-color: #ffffff;
        padding: 15px 30px 20px 30px;
        border-color: #e7eaec;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 0;
    }

    .page-login form header {
        font-size: 22px;
        text-align: center;
        border-bottom: 1px dashed #e7eaec;
        line-height: 60px;
        margin-bottom: 15px;
    }

    .page-login form footer {
        font-size: 14px;
        color: #666;
        text-align: right;
        margin-top: -15px;
    }

    .page-login form button {
        width: 100%;
        margin-top: 10px;
    }
</style>
